<template>
  <div>
    <title>电商平台实时监控系统</title>
    <div class="content">
      <div class="left">
        <div :class="['topLeft', stutas.Hot ? 'fullScreen' : '']">
          <Hot ref="Hot" />
          <img
            v-if="!stutas.Hot"
            src="../../public/static/img/open1.png"
            alt=""
            @click="open('Hot')"
          />
          <img
            v-else
            src="../../public/static/img/small1.png"
            alt=""
            @click="open('Hot')"
          />
        </div>
        <div :class="['bottomLeft', stutas.Seller ? 'fullScreen' : '']">
          <Seller ref="Seller" />
          <img
            v-if="!stutas.Seller"
            src="../../public/static/img/open1.png"
            alt=""
            @click="open('Seller')"
          />
          <img
            v-else
            src="../../public/static/img/small1.png"
            alt=""
            @click="open('Seller')"
          />
        </div>
      </div>
      <div class="center">
        <div :class="['topcenter', stutas.Map ? 'fullScreen' : '']">
          <Map ref="Map" />
          <img
            v-if="!stutas.Map"
            src="../../public/static/img/open1.png"
            alt=""
            @click="open('Map')"
          />
          <img
            v-else
            src="../../public/static/img/open1.png"
            alt=""
            @click="open('Map')"
          />
        </div>
        <div :class="['bottomcenter', stutas.Rank ? 'fullScreen' : '']">
          <Rank ref="Rank" />
          <img
            v-if="!stutas.Rank"
            src="../../public/static/img/open1.png"
            alt=""
            @click="open('Rank')"
          />
          <img
            v-else
            src="../../public/static/img/open1.png"
            alt=""
            @click="open('Rank')"
          />
        </div>
      </div>
      <div class="right">
        <div :class="['topRight', stutas.Stock ? 'fullScreen' : '']">
          <Stock ref="Stock" />
          <img
            v-if="!stutas.Stock"
            src="../../public/static/img/open1.png"
            alt=""
            @click="open('Stock')"
          />
          <img
            v-else
            src="../../public/static/img/open1.png"
            alt=""
            @click="open('Stock')"
          />
        </div>
        <div :class="['bottomRight', stutas.Trend ? 'fullScreen' : '']">
          <Trend ref="Trend" />
          <img
            v-if="!stutas.Trend"
            src="../../public/static/img/open1.png"
            alt=""
            @click="open('Trend')"
          />
          <img
            v-else
            src="../../public/static/img/open1.png"
            alt=""
            @click="open('Trend')"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Hot from "@/components/Hot.vue";
import Map from "@/components/Map.vue";
import Rank from "@/components/Rank.vue";
import Seller from "@/components/Seller.vue";
import Stock from "@/components/Stock.vue";
import Trend from "@/components/Trend.vue";

export default {
  components: {
    Hot,
    Map,
    Rank,
    Seller,
    Stock,
    Trend,
  },
  data() {
    return {
      stutas: {
        Hot: false,
        Map: false,
        Rank: false,
        Seller: false,
        Stock: false,
        Trend: false,
      },
    };
  },
  methods: {
    open(val) {
      this.stutas[val] = !this.stutas[val];
      this.$nextTick(() => {
        this.$refs[val].widthChange();
      });
    },
  },
};
</script>
<style scoped>
.fullScreen {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  margin: 0 !important;
  z-index: 99999;
}
.left,
.center,
.right {
  float: left;
  margin-left: 10px;
}
.left,
.right {
  width: 30vw;
}
.center {
  width: 35vw;
}
.topLeft,
.topRight {
  height: 56vh;
  position: relative;
}
.bottomLeft,
.bottomRight {
  margin-top: 4vh;
  height: 40vh;
  position: relative;
}
.topcenter {
  height: 65vh;
  position: relative;
}
.bottomcenter {
  height: 30vh;
  margin-top: 5vh;
  position: relative;
}
img {
  width: 8%;
  position: absolute;
  top: 2%;
  right: 2%;
}
</style>
